API Authentication এবং Authorization হল নিরাপত্তা প্রক্রিয়া যা API-এর নিরাপদ ব্যবহার নিশ্চিত করে। Authentication হল প্রক্রিয়া যেখানে ব্যবহারকারী বা সিস্টেম যাচাই করে তার পরিচয় যাচাই করা হয়, এবং Authorization হল প্রক্রিয়া যেখানে যাচাই করা ব্যবহারকারী বা সিস্টেমের কাছে নির্দিষ্ট রিসোর্সে অ্যাক্সেসের অনুমতি দেওয়া হয়।

এখানে, আমরা দেখব কিভাবে Angular অ্যাপে API Authentication এবং Authorization ব্যবহার করে ডেটা ফেচ করা যায়। আমরা JWT (JSON Web Token) ব্যবহার করে নিরাপদভাবে API এর সাথে যোগাযোগ করব।

Step-by-Step: API Authentication এবং Authorization ব্যবহার

Step 1: Angular অ্যাপ তৈরি করা

প্রথমে একটি নতুন Angular অ্যাপ তৈরি করুন:

ng new api-auth-app
cd api-auth-app

Step 2: HTTPClientModule ইমপোর্ট করা

HTTPClientModule ব্যবহার করতে app.module.ts ফাইলে এটি ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // HTTPClientModule ইমপোর্ট
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // HTTPClientModule ইমপোর্ট
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Authentication Service তৈরি করা

এখন, আমরা একটি Authentication Service তৈরি করব যা API-এর সাথে যোগাযোগ করবে এবং JWT টোকেন ব্যবহারের মাধ্যমে নিরাপদ রিকোয়েস্ট পাঠাবে।

auth.service.ts ফাইল:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  private apiUrl = 'https://api.example.com'; // API এর URL

  constructor(private http: HttpClient) { }

  // API Authentication: Login এবং JWT টোকেন গ্রহণ করা
  login(username: string, password: string): Observable<any> {
    const loginData = { username, password };
    return this.http.post<any>(`${this.apiUrl}/login`, loginData);
  }

  // JWT টোকেন ব্যবহার করে API থেকে ডেটা ফেচ করা
  getDataWithToken(): Observable<any> {
    const token = localStorage.getItem('jwt_token'); // LocalStorage থেকে JWT টোকেন নেওয়া
    const headers = new HttpHeaders({
      'Authorization': `Bearer ${token}`  // Authorization Header এ JWT টোকেন পাঠানো
    });

    return this.http.get<any>(`${this.apiUrl}/protected-data`, { headers });
  }
}

এখানে, আমরা দুটি ফাংশন তৈরি করেছি:

• login(): এটি ইউজারের নাম এবং পাসওয়ার্ড নিয়ে API Login রিকোয়েস্ট পাঠায় এবং JWT token গ্রহণ করে।
• getDataWithToken(): এটি API থেকে JWT token এর মাধ্যমে নিরাপদ ডেটা ফেচ করে।

Step 4: Login Component তৈরি করা

এখন আমরা একটি Login Component তৈরি করব যেখানে ব্যবহারকারী নাম এবং পাসওয়ার্ড দিয়ে লগইন করতে পারবেন। লগইন সফল হলে, আমরা JWT token গ্রহণ করব এবং তা localStorage-এ সংরক্ষণ করব।

login.component.ts ফাইল:

import { Component } from '@angular/core';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {

  username: string = '';
  password: string = '';
  errorMessage: string = '';

  constructor(private authService: AuthService, private router: Router) {}

  // Login function to authenticate user and store token
  login() {
    this.authService.login(this.username, this.password).subscribe(
      response => {
        // Store JWT token in localStorage
        localStorage.setItem('jwt_token', response.token);
        // Redirect to dashboard or protected route
        this.router.navigate(['/dashboard']);
      },
      error => {
        this.errorMessage = 'Invalid credentials. Please try again.';
      }
    );
  }
}

login.component.html ফাইল:

<div class="login-container">
  <h2>Login</h2>
  <form (submit)="login()">
    <input [(ngModel)]="username" type="text" placeholder="Username" required />
    <input [(ngModel)]="password" type="password" placeholder="Password" required />
    <button type="submit">Login</button>
    <div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>
  </form>
</div>

Step 5: Protected Data Component তৈরি করা

এখন আমরা একটি Dashboard Component তৈরি করব যা JWT token ব্যবহার করে API থেকে protected data ফেচ করবে। এখানে AuthService এর getDataWithToken() ফাংশন ব্যবহার করব।

dashboard.component.ts ফাইল:

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  protectedData: any;

  constructor(private authService: AuthService) {}

  ngOnInit() {
    // Fetch protected data using JWT token
    this.authService.getDataWithToken().subscribe(
      data => {
        this.protectedData = data;
      },
      error => {
        console.error('Error fetching protected data:', error);
      }
    );
  }
}

dashboard.component.html ফাইল:

<div class="dashboard-container">
  <h2>Dashboard</h2>
  <div *ngIf="protectedData">
    <pre>{{ protectedData | json }}</pre>
  </div>
  <div *ngIf="!protectedData">
    <p>Loading protected data...</p>
  </div>
</div>

Step 6: Routing Setup

এখন, আমরা login এবং dashboard রুটগুলো সেটআপ করব যাতে ব্যবহারকারী লগইন করে ড্যাশবোর্ডে যেতে পারে।

app-routing.module.ts ফাইল:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login.component';
import { DashboardComponent } from './dashboard.component';

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 7: Authentication Guard (Optional)

যদি আপনি চান যে নির্দিষ্ট রুটে যাওয়ার আগে ব্যবহারকারীকে logged in থাকতে হবে, তবে আপনি AuthGuard ব্যবহার করতে পারেন।

auth.guard.ts ফাইল:

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(): boolean {
    const token = localStorage.getItem('jwt_token');
    if (token) {
      return true;
    } else {
      this.router.navigate(['/']);  // Redirect to login page if not authenticated
      return false;
    }
  }
}

Step 8: Secure the Dashboard Route

এখন, আপনি dashboard রুটে AuthGuard ব্যবহার করতে পারেন।

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
];

সারাংশ

API Authentication এবং Authorization Angular অ্যাপে JWT (JSON Web Token) ব্যবহার করে সহজে ইমপ্লিমেন্ট করা যায়। এখানে আমরা দেখলাম কিভাবে HTTPClient ব্যবহার করে লগইন এবং ডেটা ফেচ করার জন্য JWT token ব্যবহার করা যায়। Authorization Guard ব্যবহার করে আপনি নিরাপদ রুট অ্যাক্সেস নিয়ন্ত্রণ করতে পারেন। এর মাধ্যমে আপনি একটি নিরাপদ ও ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশন তৈরি করতে পারবেন যেখানে ব্যবহারকারীরা login করে protected data অ্যাক্সেস করতে পারেন।